<template>
	<view>
		<view class="logo">
			<img src="https://supply.zhongyimotor.com/upload/applet/logo.png" width="100%" alt="">
		</view>
		<view class="loginBlock">
			<u-field v-model="mobile" @input="mobileChange" placeholder="请输入手机号"
				:error-message="errorMessagePhone"></u-field>
			<u-field v-model="password" v-if="!isVerifyLogin" @input="passwordChange" type="password"
				placeholder="请输入密码" :error-message="errorMessagePassword">
			</u-field>
			<u-field v-model="verify" v-else @input="verifyChange" type="number" placeholder="请输入验证码"
				:error-message="errorMessageVerify">
				<view :class='time == 0?"getVerify green":"getVerify"' slot="right" @click="getVerify">
					{{time == 0?"获取验证码":time+"s"}}
				</view>
			</u-field>
			<u-button type="success" shape="circle" :custom-style="buttonStyle" @click="userLogin">登录</u-button>
			<view class="otherbox">
				<view class="left" @click="changeLogin">{{isVerifyLogin?"密码登录":"验证码登录"}}</view>
				<view class="right" @click="toForgotP">忘记密码？</view>
			</view>
		</view>
		<view class="registerBtn">
			您还未有账号，请 <text @click="toRegister">快速注册</text>
		</view>
		<u-toast ref="uToast" />
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	import {
		buttonStyle
	} from "@/utils/buttonStyle.js";
	export default {
		data() {
			return {
				buttonStyle,
				mobile: "",
				password: "",
				errorMessagePhone: "",
				errorMessagePassword: "",
				errorMessageVerify: "",
				isVerifyLogin: false,
				verify: "",
				time: 0,
				timer: "",
				canVerify: true
			}
		},
		onShow() {

		},
		methods: {
			toForgotP() {
				uni.navigateTo({
					url: '/pages/forgotP/index'
				})
			},

			changeLogin() {
				this.isVerifyLogin ? this.isVerifyLogin = false : this.isVerifyLogin = true
			},
			cutDown() {
				this.time--
				if (this.time == 0) {
					this.canVerify = true
					clearInterval(this.timer)
				}
			},
			getVerify() {
				let that = this
				if (!that.canVerify) {
					return false
				}
				if (that.mobile == "") {
					that.errorMessagePhone = "请输入您的手机号";
					return;
				}
				that.canVerify = false
				let params = {
					mobile: that.mobile,
					lang: ""
				}
				that.$api.getVerify(params).then((res) => {
					if (res.resultCode == 0) {
						that.time = 90
						that.timer = setInterval(that.cutDown, 1000)
						uni.showToast({
							title: '验证码已发送',
							icon: "none"
						})
					} else {
						that.canVerify = true
					}
				})
			},
			toRegister() {
				uni.navigateTo({
					url: '/pages/register/index'
				})
			},
			verifyChange(e) {
				if (e != "") {
					this.errorMessageVerify = ""
				}
			},
			mobileChange(e) {
				if (e != "") {
					this.errorMessagePhone = ""
				}
			},
			passwordChange(e) {
				if (e != "") {
					this.errorMessagePassword = ""
				}
			},
			afterLogin(res) {
				let userKey = {
					appId: res.result.user.id,
					authorization: res.result.jwt,
				}
				uni.setStorageSync('user', res.result.user)
				uni.setStorage({
					key: 'userKey',
					data: userKey,
					success: function() {
						uni.switchTab({
							url: `/pages/mine/index`
						})
					}
				});
			},
			userLogin() {
				let that = this
				if (that.mobile == "") {
					that.errorMessagePhone = "请输入您的手机号";
					return;
				}
				if (that.password == "" && !that.isVerifyLogin) {
					that.errorMessagePassword = "请输入您的密码";
					return;
				}
				if (that.verify == "" && that.isVerifyLogin) {
					that.errorMessageVerify = "请输入短信验证码";
					return;
				}
				let params = {
					mobile: that.mobile,
					password: that.password,
					code: that.verify
				}
				switch (that.isVerifyLogin) {
					case true:
						that.$api.codeLogin(params).then(res => {
							that.afterLogin(res)
						})
						break;
					case false:
						that.$api.login(params).then(res => {
							that.afterLogin(res)
						})
						break;
				}

			}
		}
	};
</script>

<style scoped lang="less">
	.logo {
		width: 312rpx;
		height: 116rpx;
		margin: 200rpx auto;
	}


	.loginBlock {

		.otherbox {
			display: flex;
			color: #0FBD7F;

			.left {
				color: #999999;
				margin-right: auto;
			}
		}
	}
</style>